<template>
  <!-- 添加或修改参数配置对话框  -->
  <el-drawer
    :visible.sync="openDrawer"
    append-to-body
    close-on-press-escape
    :wrapperClosable="wrapperClosable"
    :size="device === 'desktop' ? (size ? size : '600px') : '100%'"
    @close="cancel"
    :show-close="false"
  >
    <div class="flex-between" slot="title">
      <div class="flex-between-item">
        <img src="@/assets/images/modal2.svg" style="margin-right: 8px" />
        <span
          style="
            padding-left: 10px;
            font-size: 14px;
            color: #565656;
            line-height: 20px;
          "
          >{{ titleState }}{{ title || metaTitle }}</span>
        <slot name="slotTitle"></slot>
      </div>
      <i @click="cancel" class="el-icon-close close_style"></i>
    </div>
    <!--  tent sta  -->
    <div class="drawers_tent">
      <el-form>
        <slot></slot>
      </el-form>
    </div>
    <!-- tent end -->
    <div class="button_base" style="display: flex; justify-content: flex-end">
      <div class="button_item">
        <footer-modal
          :loading="loading"
          :close="close"
          @close="cancel"
          :butName="butName"
          :setLook="setLook"
          :submit="submit"
          @submit="$emit('submit')"
        >
          <slot name="elseBut"></slot>
        </footer-modal>
      </div>
    </div>
  </el-drawer>
</template>
<script>
import FooterModal from "./footerModal.vue";
export default {
  components: {
    FooterModal,
  },
  props: {
    // name
    title: {
      type: String | Boolean | Number,
      default: "",
    },
    size: {
      type: String | Number,
      default: () => {
        return "";
      },
    },
    // name
    butName: {
      type: String,
      default: "保存",
    },
    // show 弹出
    open: {
      type: Boolean,
      default: false,
    },
    // 确认 loading
    loading: {
      type: Boolean,
      default: false,
    },
    wrapperClosable: {
      type: Boolean,
      default: false,
    },
    // show 确认
    submit: {
      type: Boolean,
      default: true,
    },
    // show 取消
    close: {
      type: Boolean,
      default: true,
    },
    // 预测 查看的状态
    setLook: {
      default: "",
    },
  },
  watch: {
    open(val) {
      this.openDrawer = val;
    },
    openDrawer(val) {
      this.$emit("update:open", val);
    },
  },
  computed: {
    device() {
      return this.$store.getters.device;
    },
    metaTitle() {
      return this.$route.meta && this.$route.meta.title;
    },
    titleState() {
      return this.setLook === 0
        ? "查看-"
        : this.setLook === 1
        ? "新增-"
        : this.setLook === 2
        ? "修改-"
        : "";
    },
  },
  data() {
    return {
      openDrawer: false,
    };
  },
  methods: {
    // 取消按钮
    cancel() {
      this.openDrawer = false;
      this.$emit("cancel");
    },
  },
};
</script>
<style lang="scss" scoped>
.drawers_tent {
  padding: 20px 20px 70px;
}
.button_base {
  position: absolute;
  bottom: 0;
  z-index: 999;
  padding-bottom: 20px;
  padding-right: 20px;
  width: 100%;
  background-color: #fff !important;
  border-top: 1px solid #eaeaea;
  padding-top: 20px;
  .button_item {
    display: flex;
    justify-content: flex-end;
  }
}
.flex-between {
  color: #496dff;
  background-color: #fff !important;
  display: flex;
  align-items: center;
  justify-content: space-between;
  .flex-between-item {
    display: flex;
    align-items: center;
  }

  .close_style {
    cursor: pointer;
    border-radius: 50%;
    background-color: #496dff;
    font-size: 12px;
    color: #fff;
    padding: 3px;
    &:hover {
      background-color: #597afd;
    }
  }
}
</style>
